<script>
/**
 * @desc 主页面底部tabs
 */

import { mapState, mapGetters, mapMutations } from 'vuex'
import { navTo } from '@/utils'
import tab01 from '@/assets/icons/tab01.png'
import tab02 from '@/assets/icons/tab02.png'
import tab03 from '@/assets/icons/tab03.png'
import tab04 from '@/assets/icons/tab04.png'
import tab01a from '@/assets/icons/tab01-active.png'
import tab02a from '@/assets/icons/tab02-active.png'
import tab03a from '@/assets/icons/tab03-active.png'
import tab04a from '@/assets/icons/tab04-active.png'

export default {
  name: 'the-bottom-tabs',

  data: () => ({
    tabs: [
      { ico: tab01, icoActive: tab01a, text: '钱包' },
      { ico: tab02, icoActive: tab02a, text: '图表' },
      { ico: '', icoActive: '', text: '' },
      { ico: tab03, icoActive: tab03a, text: '时间簿' },
      { ico: tab04, icoActive: tab04a, text: '我的' }
    ]
  }),

  computed: {
    ...mapState(['systemInfo']),
    ...mapState('BottomTabs', ['tabIndex']),
    ...mapGetters(['isIphoneX']),

    bottomBarHeight() {
      return `${Math.floor(56 * this.systemInfo.screenWidth / 375)}px`
    },
    paddingBottom() {
      return this.isIphoneX ? '34px' : '0'
    }
  },

  methods: {
    ...mapMutations('BottomTabs', ['handleTab']),
    navTo
  }
}
</script>

<template>
  <div name="bottom-bar">
    <!-- height = 14*2.5 + 14*1.5 -->
    <div
      :style="{height:bottomBarHeight,paddingBottom}"
      name="fixed-height"
    ></div>
    <div
      :class="$sty.bottomTabs"
      :style="{paddingBottom}"
      id="tabs"
    >
      <span
        :class="[$sty.tab, i===tabIndex?$sty.active:null]"
        :key="i"
        @click="()=>handleTab(i)"
        v-for="(v,i) in tabs"
      >
        <div :class="$sty.tabImg">
          <img
            :class="i!==tabIndex?$sty.tabImgVisible:$sty.tabImgHidden"
            :src="v.ico"
            mode="aspectFill"
          >
          <img
            :class="i===tabIndex?$sty.tabImgVisible:$sty.tabImgHidden"
            :src="v.icoActive"
            mode="aspectFill"
          >
        </div>
        <i :class="$sty.tabText">{{v.text}}</i>
      </span>
      
      <span
        :class="$sty.bill"
        @click="navTo('add-record')"
      ></span>
    </div>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
